<template>
  <div class="item-detail flex column">
    <div class="item-title">文本组件</div>
    <div class="item-content flex column">
    	<Form :model="detailData" :label-width="80">
	        <FormItem label="主标题">
	          <div class="input-wrapper">
	            <Input v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
	          </div>
	        </FormItem>
	    </Form>
      <div class="scroll">
          <div id="UEDITOR-MENU"></div>
          <!-- <ue :content.sync="detailData.json" name="text" ref="text"></ue> -->
      </div>
    </div>
  </div>
</template>


<script>
// vuex仓库
import store from '@/store/index' 
// vuex获取 
import {mapGetters} from 'vuex' 
// import Ue from 'base/ue/ue.vue'
import Config from '@/config'
const UEDITOR_HOME_URL = "https://file.open.banchengyun.com/ueditor/";

export default {
  name: 'TextDetail',
  props: {
    detailData: {
      
    },
  },
  data() {
    return {
        // 编辑的配置
        myConfig: {
            serverUrl: `${Config.baseUrl}/ueditor`,
            initialFrameWidth: '100%',
            initialFrameHeight: '500',
            UEDITOR_HOME_URL,
            autoHeightEnabled: false,
            autoFloatEnabled:false,
            toolbars: [[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'attachment', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'snapscreen', 'wordimage', '|',
                'insertrow', 'deleterow', 'insertcol', 'deletecol', 'splittocols', '|',
                'searchreplace', 'drafts'
            ]],
        },

	  }
  },
  methods: {
      // 编辑器初始化
      ueditorInit() {
          window.UEDITOR_CONFIG = Object.assign(window.UEDITOR_CONFIG, {
                xssFilterRules: false,
                //input xss过滤
                inputXssFilter: false,
                //output xss过滤
                outputXssFilter: false,
                // 关闭右键菜单
                enableContextMenu: false
           })

          this.$nextTick(()=>{
            this.UEditorMenu = UE.getEditor(
              'UEDITOR-MENU',
              this.myConfig
            );
            this.UEditorMenu.ready(() => {
              this.UEditorMenu.setContent(this.detailData.json?this.detailData.json:"");
            });

            this.UEditorMenu.addListener('contentChange', () => {
              this.detailData.json = this.UEditorMenu.getContent()
            })
          }) 

      },
      getContent() {
        this.detailData.json = this.UEditorMenu.getContent();
      }
  },

  computed:{
    // ueChoseState() {
    //   return store.state.ueChose;
    // }
  },

  watch: {
    // ueChoseState: {
    //   handler: function (val) {
    //   },
    //   deep:  true,
    // }
  },
  
  mounted() {

  },

  created() {
    var that = this;
    eventBus.$off("uechose");
    eventBus.$on("uechose",function(){
      that.$nextTick(()=>{
        if (that.UEditorMenu) {
          that.UEditorMenu.setContent(that.detailData.json?that.detailData.json:"");
        } 
      })
    })
    var that = this;
    this.ueditorInit()
  },

  destroyed() {
    this.UEditorMenu.destroy();
    this.UEditorMenu = null;
   },

  
  components: {
  	// Ue
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

	.item-content {
		flex: 1;
	}

</style>
